<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <label class="el-form-item-label">厂别/车间</label>
        <el-input v-model="query.plant" clearable placeholder="厂别/车间" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">车间描述</label>
        <el-input v-model="query.plantName" clearable placeholder="车间描述" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">制程</label>
        <el-input v-model="query.process" clearable placeholder="制程" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">工序类别</label>
        <el-input v-model="query.processType" clearable placeholder="工序类别" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">线体</label>
        <el-input v-model="query.lineId" clearable placeholder="线体" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">成品料号</label>
        <el-input v-model="query.mat" clearable placeholder="成品料号" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">站位/工位</label>
        <el-input v-model="query.track" clearable placeholder="站位/工位" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">货区</label>
        <el-input v-model="query.location" clearable placeholder="货区" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="120px">
          <el-form-item label="厂别/车间" prop="plant">
            <el-input v-model="form.plant" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="车间描述">
            <el-input v-model="form.plantName" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="制程" prop="process">
            <el-input v-model="form.process" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="工序类别" prop="processType">
            <el-input v-model="form.processType" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="工序类别名" prop="processTypeName">
            <el-input v-model="form.processTypeName" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="工序等级" prop="processGrade">
            <el-input v-model="form.processGrade" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="工序等级名" prop="processGradeName">
            <el-input v-model="form.processGradeName" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="制程描述">
            <el-input v-model="form.processName" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="线体" prop="lineId">
            <el-input v-model="form.lineId" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="线体描述">
            <el-input v-model="form.lineName" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="成品料号" prop="mat">
            <el-input v-model="form.mat" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="站位/工位">
            <el-input v-model="form.track" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="站位/工位名称">
            <el-input v-model="form.trackName" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="货区" prop="location">
            <el-input v-model="form.location" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="货区名称" prop="locationName">
            <el-input v-model="form.locationName" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="站点编码/物料点/库位/储位" prop="stationCode">
            <el-input v-model="form.stationCode" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="地标" prop="stationMark">
            <el-input v-model="form.stationMark" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="物料编码" prop="material">
            <el-input v-model="form.material" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="物料名称">
            <el-input v-model="form.materialName" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="关键件扫码" prop="isScanKey">
            <el-input v-model="form.isScanKey" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="物料编码段" prop="materialSeq">
            <el-input v-model="form.materialSeq" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="BOM定额" prop="bomRate">
            <el-input v-model="form.bomRate" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="单位" prop="unit">
            <el-input v-model="form.unit" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.remark" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="创建时间">
            <el-input v-model="form.createdAt" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="更新时间">
            <el-input v-model="form.updatedAt" style="width: 250px;" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <!-- <el-table-column prop="id" label="id" /> -->
        <el-table-column prop="plant" label="厂别/车间" />
        <el-table-column prop="plantName" label="车间描述" />
        <el-table-column prop="process" label="制程" />
        <el-table-column prop="processType" label="工序类别" />
        <el-table-column prop="processTypeName" label="工序类别名" />
        <el-table-column prop="processGrade" label="工序等级" />
        <el-table-column prop="processGradeName" label="工序等级名" />
        <el-table-column prop="processName" label="制程描述" />
        <el-table-column prop="lineId" label="线体" />
        <el-table-column prop="lineName" label="线体描述" />
        <el-table-column prop="mat" label="成品料号" />
        <el-table-column prop="track" label="站位/工位" />
        <el-table-column prop="trackName" label="站位/工位名称" />
        <el-table-column prop="location" label="货区" />
        <el-table-column prop="locationName" label="货区名称" />
        <el-table-column prop="stationCode" label="站点编码/物料点/库位/储位" />
        <el-table-column prop="stationMark" label="地标" />
        <el-table-column prop="material" label="物料编码" />
        <el-table-column prop="materialName" label="物料名称" />
        <el-table-column prop="isScanKey" label="关键件扫码" />
        <el-table-column prop="materialSeq" label="物料编码段" />
        <el-table-column prop="bomRate" label="BOM定额" />
        <el-table-column prop="unit" label="单位" />
        <el-table-column prop="remark" label="备注" />
        <el-table-column prop="createdAt" label="创建时间" />
        <el-table-column prop="updatedAt" label="更新时间" />
        <el-table-column v-if="checkPer(['admin','locationMapping:edit','locationMapping:del'])" label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :permission="permission"
            />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudLocationMapping from '@/api/work/locationMapping'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
// import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'

const defaultForm = { plant: null, plantName: null, process: null, processType: null, processTypeName: null, processGrade: null, processGradeName: null, processName: null, lineId: null, lineName: null, mat: null, track: null, trackName: null, location: null, locationName: null, stationCode: null, stationMark: null, material: null, materialName: null, isScanKey: null, materialSeq: null, bomRate: null, unit: null, remark: null, createdAt: null, updatedAt: null }
export default {
  name: 'LocationMapping',
  components: { pagination, crudOperation, rrOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({ title: 'location_mapping', url: 'api/locationMapping', idField: 'id', sort: 'id,desc', crudMethod: { ...crudLocationMapping }})
  },
  data() {
    return {
      permission: {
        add: ['admin', 'locationMapping:add'],
        edit: ['admin', 'locationMapping:edit'],
        del: ['admin', 'locationMapping:del']
      },
      rules: {
        plant: [
          { required: true, message: '厂别/车间不能为空', trigger: 'blur' }
        ],
        process: [
          { required: true, message: '制程不能为空', trigger: 'blur' }
        ],
        processType: [
          { required: true, message: '工序类别不能为空', trigger: 'blur' }
        ],
        processTypeName: [
          { required: true, message: '工序类别名不能为空', trigger: 'blur' }
        ],
        processGrade: [
          { required: true, message: '工序等级不能为空', trigger: 'blur' }
        ],
        processGradeName: [
          { required: true, message: '工序等级名不能为空', trigger: 'blur' }
        ],
        lineId: [
          { required: true, message: '线体不能为空', trigger: 'blur' }
        ],
        mat: [
          { required: true, message: '成品料号不能为空', trigger: 'blur' }
        ],
        location: [
          { required: true, message: '货区不能为空', trigger: 'blur' }
        ],
        locationName: [
          { required: true, message: '货区名称不能为空', trigger: 'blur' }
        ],
        stationCode: [
          { required: true, message: '站点编码/物料点/库位/储位不能为空', trigger: 'blur' }
        ],
        stationMark: [
          { required: true, message: '地标不能为空', trigger: 'blur' }
        ],
        material: [
          { required: true, message: '物料编码不能为空', trigger: 'blur' }
        ],
        isScanKey: [
          { required: true, message: '关键件扫码不能为空', trigger: 'blur' }
        ],
        materialSeq: [
          { required: true, message: '物料编码段不能为空', trigger: 'blur' }
        ],
        bomRate: [
          { required: true, message: 'BOM定额不能为空', trigger: 'blur' }
        ],
        unit: [
          { required: true, message: '单位不能为空', trigger: 'blur' }
        ]
      },
      queryTypeOptions: [
        { key: 'plant', display_name: '厂别/车间' },
        { key: 'plantName', display_name: '车间描述' },
        { key: 'process', display_name: '制程' },
        { key: 'processType', display_name: '工序类别' },
        { key: 'processTypeName', display_name: '工序类别名' },
        { key: 'processGrade', display_name: '工序等级' },
        { key: 'processGradeName', display_name: '工序等级名' },
        { key: 'processName', display_name: '制程描述' },
        { key: 'lineId', display_name: '线体' },
        { key: 'lineName', display_name: '线体描述' },
        { key: 'mat', display_name: '成品料号' },
        { key: 'track', display_name: '站位/工位' },
        { key: 'trackName', display_name: '站位/工位名称' },
        { key: 'location', display_name: '货区' },
        { key: 'locationName', display_name: '货区名称' }
      ]
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    }
  }
}
</script>

<style scoped>

</style>
